<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>WebSocket 测试 乔丹</h2>
    <header class="header">
      <a class="back"></a>
      <h3 class="tit">服务端：</h3>
    </header>
    <div id="message"></div>
    <header class="header1">
      <a class="back"></a>
      <h3 class="tit">客户端：</h3>
    </header>
    <div id="footer">
      <input id="text" class="my-input" type="text" />
      <button onclick="send()">发&nbsp;送</button>
    </div>

    <script language="javascript" type="text/javascript">
      var websocket = null;
      //判断当前浏览器是否支持WebSocket，是则创建WebSocket
      if ('WebSocket' in window) {
        console.log('浏览器支持Websocket');
        websocket = new WebSocket('ws://localhost:10001/websocket/薛虎');
      } else {
        alert('当前浏览器 Not support websocket');
      }

      //连接发生错误的回调方法
      websocket.onerror = function () {
        console.log('WebSocket连接发生错误');
        setMessageInnerHTML('WebSocket连接发生错误');
      };
      //连接成功建立的回调方法
      websocket.onopen = function () {
        //	setMessageInnerHTML("WebSocket连接成功");
        console.log('WebSocket连接成功');
      };
      //接收到消息的回调方法
      websocket.onmessage = function (event) {
        if (event.data) {
          setMessageInnerHTML(event.data);
        }
        console.log(event.data);
      };
      //连接关闭的回调方法
      websocket.onclose = function () {
        console.log('WebSocket连接关闭');
      };

      //关闭WebSocket连接
      function closeWebSocket() {
        websocket.close();
      }

      //发送消息
      function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
      }

      //将消息显示在网页上
      function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
      }

      //如果websocket连接还没断开就关闭了窗口，后台server端会抛异常。
      //所以增加监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接
      window.onbeforeunload = function () {
        closeWebSocket();
      };
    </script>
  </body>
  <div id="output"></div>
</html>
